<script setup lang="ts">

import { ref } from 'vue'
import { NInput, NButton } from 'naive-ui'

const emit = defineEmits<{
  (e:'add',text:string):void
}>()

const newTodo = ref('')

const addTodo = () => {
  if (newTodo.value.trim()) {
    emit('add', newTodo.value)
    newTodo.value = ''
  }
}
</script>

<template>
  <div class="input-group">
    <n-input
        v-model:value="newTodo"
        @keyup.enter="addTodo"
        placeholder="输入待办事项"
    />
    <n-button @click="addTodo" type="primary">添加</n-button>
  </div>
</template>

<style scoped>
.input-group {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
</style>